<template>
  <div class="pro_list">
    <div class="list_one" v-for="item in state.list" :key="item.name">
        <span>{{item.name}}</span>
         <a-progress type="line" :size="15" title="111" 
         :showInfo="true"  :percent="(item.num/895)*100" status="active"
         :strokeColor="item.bgcolor" >
              <template #format="percent">
                <span style="color: white">{{ item.num }}</span>
              </template>
        </a-progress>
    </div>
  </div>
</template>

<script setup>
import {reactive} from 'vue'
let toPercen=(percen,successPercent)=>{
  console.log(percen,successPercent,"-----------")
  return percen+"%"
}
let state=reactive({
  list:[{
    name:"岳阳",
    num:800,
    bgcolor:"#67783d"
  },{
    name:"阜阳",
    num:600,
      bgcolor:"#cc783d"
  },
  {
    name:"安阳",
    num:500,
      bgcolor:"#aa783d"
  },
 {
    name:"信阳",
    num:400,
      bgcolor:"#66783d"
  },
  {
    name:"洛阳",
    num:400,
     bgcolor:"#00783d"
  },
  {
    name:"郑州",
    num:300,
      bgcolor:"#22783d"
  }]
})
</script>
<style lang="less" scoped>

  .pro_list{
       width: 450px;
       height: 300px;
       padding: 40px;
       .list_one{
        display: flex;
        margin-top: 5px;
        color: white;
        .a-progress{
          color:white;
        }
        span{
          width:50px;
        }
       }
  }
</style>
